﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-table-master/dist/bootstrap-table.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <button class='btn btn-default'>添加</button>
        <table id="table"></table>
    </div>
</body>
</html>
<script src="Scripts/jquery-3.3.1.js"></script>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="bootstrap-table-master/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table-master/dist/bootstrap-table.js"></script>
<script src="bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"></script>
<script>
    $(function () {
        $("#table").bootstrapTable({
            url: "https://localhost:44394/api/Students/GetStuinfo",
            method: "Get",
            pagination: true,  //是否开启分页
            search: true,    //是否开启搜索框
            showRefresh: true,  //是否开启刷新页面
            columns: [
                {
                    checkbox: true,
                    visible: true
                },
                {
                    field: "id",
                    title: "id",
                    clickToSelect: true,
                    sortable: true
                },
                {
                    field: "StrName",
                    title: "姓名"
                },
                {
                    field: "sex",
                    title: "性别"
                },
                {
                    field: "married",
                    title: "婚否"
                },
                {
                    field: "GradeName",
                    title: "年级"
                },
                {
                    title: "头像",
                    formatter: function (value, row) {
                        return "<img src=" + row.Photo + "/>";
                    }
                },
                {
                    formatter: function (value, row) {
                        return "<button class='btn btn-default' data-id='" + row.id + "' name='delete'>删除</button>"
                    }
                }
            ]
        });
        //on未来元素    删除按钮是使用bootstrapTable添加上去的 所以是未来
        $("#table").on("click", "button[name=delete]", function () {
            $.ajax({
                url: "https://localhost:44394/api/Students/GetDel?id=" + $(this).attr("data-id"),
                success: function (obj) {
                    console.log(obj);
                    if (obj == '1') {
                        alert("删除成功");
                        $("#table").bootstrapTable('refresh');
                    } else {
                        alert("删除失败");
                    }
                }
            })
        });

        //$("#del").click(function () {
        //    $.ajax({
        //        url: "https://localhost:44394/api/student/GetDelete",
        //        success: function (obj) {
        //            if (obj != '0') {
        //                alert("删除成功");
        //            } else {
        //                alert("删除失败");
        //            }
        //        }
        //    })
        //})
    })
</script>
